<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>按键控制界面</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
            overflow: hidden;
        }
        
        .container {
            display: flex;
            width: 100%;
            height: 100%;
        }
        
        .key-button {
            flex: 1;
            font-size: 10vw;
            font-weight: bold;
            border: none;
            cursor: pointer;
            transition: all 0.1s;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .key-button:active {
            transform: scale(0.95);
        }
        
        #z-button {
            background-color: #4ecdc4;
            color: white;
        }
        
        #x-button {
            background-color: #ff6b6b;
            color: white;
        }
        
        .pressed {
            background-color: #ffd166 !important;
            color: #333 !important;
        }
    </style>
</head>
<body>
    <div class="container">
        <button id="z-button" class="key-button">Z</button>
        <button id="x-button" class="key-button">X</button>
    </div>

    <script>
        // 获取DOM元素
        const xButton = document.getElementById('x-button');
        const zButton = document.getElementById('z-button');
        
        // WebSocket连接
        const socket = io('http://192.168.1.5:5001');
        
        // 更新按钮样式
        function updateButtonStyles(keyState) {
            if (keyState.X) {
                xButton.classList.add('pressed');
            } else {
                xButton.classList.remove('pressed');
            }
            
            if (keyState.Z) {
                zButton.classList.add('pressed');
            } else {
                zButton.classList.remove('pressed');
            }
        }

        // 发送按键控制消息
        function sendKeyControl(key, action) {
            socket.emit('control_key', {
                key: key,
                action: action
            });
        }

        // 为按钮添加事件监听器
        xButton.addEventListener('touchstart', (e) => {
            e.preventDefault();
            sendKeyControl('X', 'press');
        });

        xButton.addEventListener('touchend', (e) => {
            e.preventDefault();
            sendKeyControl('X', 'release');
        });

        xButton.addEventListener('mousedown', () => {
            sendKeyControl('X', 'press');
        });

        xButton.addEventListener('mouseup', () => {
            sendKeyControl('X', 'release');
        });

        xButton.addEventListener('mouseleave', () => {
            sendKeyControl('X', 'release');
        });

        zButton.addEventListener('touchstart', (e) => {
            e.preventDefault();
            sendKeyControl('Z', 'press');
        });

        zButton.addEventListener('touchend', (e) => {
            e.preventDefault();
            sendKeyControl('Z', 'release');
        });

        zButton.addEventListener('mousedown', () => {
            sendKeyControl('Z', 'press');
        });

        zButton.addEventListener('mouseup', () => {
            sendKeyControl('Z', 'release');
        });

        zButton.addEventListener('mouseleave', () => {
            sendKeyControl('Z', 'release');
        });

        // 添加键盘事件支持
        document.addEventListener('keydown', (event) => {
            if ((event.key === 'x' || event.key === 'X') && event.target.tagName !== 'INPUT') {
                event.preventDefault();
                sendKeyControl('X', 'press');
            } else if ((event.key === 'z' || event.key === 'Z') && event.target.tagName !== 'INPUT') {
                event.preventDefault();
                sendKeyControl('Z', 'press');
            }
        });

        document.addEventListener('keyup', (event) => {
            if ((event.key === 'x' || event.key === 'X') && event.target.tagName !== 'INPUT') {
                event.preventDefault();
                sendKeyControl('X', 'release');
            } else if ((event.key === 'z' || event.key === 'Z') && event.target.tagName !== 'INPUT') {
                event.preventDefault();
                sendKeyControl('Z', 'release');
            }
        });

        // WebSocket事件处理
        socket.on('key_state_update', (keyState) => {
            updateButtonStyles(keyState);
        });
    </script>
</body>
</html>